<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!--swiper-->
    <link rel="stylesheet" th:href="@{/dist/libs/swiper/idangerous.swiper2.7.6.css}">
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="order02-contentPart">
    <div class="order02-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" th:value="${beginTime}" class="time-input" id="startTime" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>-</span>
                                <div class="fl inputTime-outer">
                                    <input type="text"  th:value="${endTime}" class="time-input" id="endTime" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl" onclick="reloadIt()">
                                    <a class="btn btn-primary" style="margin-left: 24px;">搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="btn btn-primary mlr_8 thisYear">本年</a>
                                <a class="btn btn-primary mlr_8 thisMonth">本月</a>
                                <a class="btn btn-primary mlr_8 thisDay">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area02">
                <a class="arrow-left" href="#"></a>
                <a class="arrow-right" href="#"></a>
                <div class="swiper-container ">
                    <div class="swiper-wrapper statistics-list statisticsSwiper-list" id="orderStatistics">
                        <div class="swiper-slide statistics-item" th:each="l,0:${list}">
                            <div th:id="${l.type}" th:class="'main color0'+ ${l.class} ">
                                <div class="indro"  th:text="${l.key}">共计订单</div>
                                <div class="num"  th:text="${l.val}">13858</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew tab-content">
            <div class="col-sm-4 left">
                <div class="echart-item">
                    <div id="leftMain" style="width:100%;height:410px;"></div>
                </div>
            </div>
            <div class="col-sm-8 right">
                <div class="filter-btn">
                    <a class="btn " id="yearBtn">年</a>
                    <a class="btn active " id="monthBtn">月</a>
                    <a class="btn" id="dayBtn">日</a>
                </div>
                <div class="echart-item ">
                    <div id="main" style="width:100%;height:410px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/dist/libs/swiper/idangerous.swiper.min.js}"></script>
<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>


<script>
    $(function(){

    });
</script>
<script type="text/javascript" th:inline="javascript">

    slidesPerView=4
    if(document.body.clientWidth>1400){
        slidesPerView=6
    }

    var mySwiper = new Swiper('.swiper-container',{
        slidesPerView : slidesPerView,
    });
    $('.arrow-left').on('click', function(e){
        e.preventDefault()
        mySwiper.swipePrev()
    })
    $('.arrow-right').on('click', function(e){
        e.preventDefault()
        mySwiper.swipeNext()
    })


    window.onresize=function() {

        if(document.body.clientWidth<1400){
            mySwiper.params.slidesPerView=4;
            mySwiper.reInit();
            mySwiper.swipeTo(0,0)
        }else{
            mySwiper.params.slidesPerView=6;
            mySwiper.reInit();
            mySwiper.swipeTo(0,0)
        }
    }


    var currentSortList = [[${key}]];
    var currentSort = '共计订单'
    /**
     * 设置柱状图的数据(参数用于获取数据)
     * @param sortIdx:共计订单/直供/内销一/内销二
     * @param timeSort:年月日
     */
    function setBarData(sortIdx,timeSort,x,y) {
        // 调用方法获取数据
        var xData = ['09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07', '08'];
        var yData = [320, 220, 240, 160, 120, 204,280,240,190,110,210,210];
        if (x && y) {
            xData = x;
            yData = y;
        }
        var myChart = echarts.init(document.getElementById('main'));
        var option01 = {
            title: {
                text: '物资统计表',
                x: 'center',
                textStyle:{
                    fontSize:32,
                    color:'#2d353e'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle:{
                    fontSize:22
                }
            },
            grid:{
                top:'21%',
                bottom:'7%',
                left:'7%',
                right:'5%'
            },
            xAxis: {
                name:'月',
                nameTextStyle:{
                    color: '#a1a4a8',
                    fontSize: 20,
                },
                data: xData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f3f6fa'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 20,
                    }
                },
            },
            yAxis: {
                name: '个',
                nameTextStyle:{
                    color: '#a1a4a8',
                    fontSize: 20,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#f3f6fa'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#f3f6fa'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 20,
                    }
                },
            },
            series: {
                name:'物资数',
                type: 'bar',
                barWidth: 18,
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#4cb3db' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#3d7ee0' // 100% 处的颜色
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        barBorderRadius:[9, 9, 0, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#60c5ff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#428af5' // 100% 处的颜色
                        }], false)
                    }
                },
                data: yData
            }
        };
        myChart.setOption(option01);
    }
    setBarData(currentSort,'year')

    $('#yearBtn').click(function () {
        timeSort = 1;
        $(this).addClass('active').siblings().removeClass('active')
        setBarData(currentSort,'year')
    })


    $('#monthBtn').click(function () {
        timeSort = 2;
        $(this).addClass('active').siblings().removeClass('active')
        console.log(currentSort)
        setBarData(currentSort,'year')
    })


    $('#dayBtn').click(function () {
        timeSort = 3;
        $(this).addClass('active').siblings().removeClass('active')
        setBarData(currentSort,'day')
    })



    // 饼状图高亮下标
    var currentSortIndx = -1

    // 饼状图
    var myChart00 = echarts.init(document.getElementById('leftMain'));
    // 饼状图数据
    var pieDatas =[];
    var list = [[${list}]]
    $.each(list,function (i,vals) {
        if(i > 0){
            var a = {value:vals.val,name:vals.key};
            pieDatas.push(a);
    }

    })

    var option00 = {
        legend: {
            orient: "vartical",
            right:'4%',
            bottom: "16%",
            itemWidth: 20,
            itemHeight: 15,
            textStyle:{
                fontSize:16,
                color:'#7c8b92'
            },
            itemGap :15,
            selectedMode:false
        },
        title: {
            text: '物资数量比例图',
            x: 'center',
            textStyle:{
                fontSize:32,
                color:'#2d353e'
            }
        },
        tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b}:({d}%)"
        },
        series:  {
            name: '',
            type: 'pie',
            center: ['35%', '57%'],
            radius: ['42%', '76%'],
            color: ['#a781ff', '#5ad6ff', '#ffba60', '#749fff', '#8eff73'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',
                    textStyle:{
                        fontSize:20
                    }
                }
            },
            itemStyle: { //图形样式
                normal: {
                    borderColor: '#ffffff',
                    borderWidth: 2,
                },
            },
            data: pieDatas
        }
    };
    myChart00.setOption(option00);

    // 切换"共计订单"、"直供"
    $("#orderStatistics .statistics-item").each(function (index) {
        var _idx = index
        $(this).children(".main").eq(0).addClass('color0'+(_idx%6+1)).click(function () {
            $(this).addClass("active").parent().siblings().children(".main").removeClass("active");

            currentSort = currentSortList[_idx]
            // 设置柱状图数据
            setBarData(currentSort,'year')
            initEchart();

            // 饼状图高亮
            myChart00.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentSortIndx
            });
            if (_idx>0){
                currentSortIndx = _idx-1
            }else{
                currentSortIndx = -1
            }
            myChart00.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex:currentSortIndx
            });

        })
    })

    //检测鼠标移入后显示之前默认高亮的那块
    myChart00.on('mouseover', function(e) {
        // 移除默认高亮
        myChart00.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex:currentSortIndx
        });
    })
    //检测鼠标移出后显示之前默认高亮的那块
    myChart00.on('mouseout', function(e) {
        // 移除所有高亮
        myChart00.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: option00.series.data.length
        });
        // 高亮选中部分
        myChart00.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex:currentSortIndx
        });
    });

    //本年月日
    $('.thisYear').click(function () {
        $('#startTime').val(new Date().getFullYear() + "-01-01");
        reloadIt();
    });

    $('#yearBtn').click(function () {
        timeSort = 1;
        $(this).addClass('active').siblings().removeClass('active')
        initEchart()
        // setBarData(currentSort, 'year')
    });
    timeSort=2;
    initEchart();
    function initEchart() {
        var url = "/system/ncGoods/goodsQuery";
        var data = {
            beginTime: $('#startTime').val(),
            endTime: $('#endTime').val(),
            metialType: $(".active").attr("id"),
            dataSpan: timeSort
        };
        myPost(url, data, function (data) {
            if (data.code == 0) {
                var x = [];
                var y = [];
                $(data.rows).each(function (i, e) {
                    x.push(e.x);
                    y.push(e.count);
                });
                setBarData(currentSort, 'year', x, y);
            }

        }, function () {

        })
    };



    $('#monthBtn').click(function () {
        timeSort = 2;
        $(this).addClass('active').siblings().removeClass('active')
        console.log(currentSort)
        initEchart()
        // setBarData(currentSort, 'month')
    })


    $('#dayBtn').click(function () {
        timeSort = 3;
        $(this).addClass('active').siblings().removeClass('active')
        initEchart();
        // setBarData(currentSort, 'day')
    })

    $('.thisMonth').click(function () {
        var d = new Date();
        var m = d.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
        reloadIt();
    });

    $('.thisDay').click(function () {
        $('#startTime').val(dateFtt(new Date()));
        reloadIt();
    });


    function reloadIt() {
        var link = "/system/ncGoods/merial";
        var s = $('#startTime').val();
        var e = $('#endTime').val();
        link += "?beginTime=" + s + "&endTime=" + e ;
        window.location.href = link;
    }
    setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);

    setTitle("物资管理",false)
</script>
</body>
</html>
